<!doctype html>
<html>

<head>
<title>AppList</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<link rel="stylesheet" type="text/css" href="assets/styles/main.css"/>
<script type="text/javascript" src="assets/scripts/main.js"></script>
</head>

<body>

<div id="monitorView">
D1: <input type="text" id="dis1"/> D2: <input type="text" id="dis2"/><br/>
W: <input type="text" id="imgWx"/> H: <input type="text" id="imgHx"/><br/>
</div>
<div id="top">
	<h1>Opal M10 HD</h1>
</div>
<div id="view">
	<div class="left-con">
		<div class="v-con" id="pCon">
			<div id="pList" class="p-con">
				<div class="app-list">
					<a href="assets/images/1.png"><img src="assets/images/1.png" alt=""/></a>
					<a href="assets/images/2.png"><img src="assets/images/2.png" alt=""/></a>
					<a href="assets/images/3.png"><img src="assets/images/3.png" alt=""/></a>
					<a href="assets/images/4.png"><img src="assets/images/4.png" alt=""/></a>
					<a href="assets/images/5.png"><img src="assets/images/5.png" alt=""/></a>
					<a href="assets/images/6.png"><img src="assets/images/6.png" alt=""/></a>
					<a href="assets/images/7.png"><img src="assets/images/7.png" alt=""/></a>
					<a href="assets/images/8.png"><img src="assets/images/8.png" alt=""/></a>
					<a href="assets/images/9.png"><img src="assets/images/9.png" alt=""/></a>
					<a href="assets/images/10.png"><img src="assets/images/10.png" alt=""/></a>
					<a href="assets/images/11.png"><img src="assets/images/11.png" alt=""/></a>
					<a href="assets/images/12.png"><img src="assets/images/12.png" alt=""/></a>
					<a href="assets/images/13.png"><img src="assets/images/13.png" alt=""/></a>
					<a href="assets/images/14.png"><img src="assets/images/14.png" alt=""/></a>
					<a href="assets/images/15.png"><img src="assets/images/15.png" alt=""/></a>
					<a href="assets/images/16.png"><img src="assets/images/16.png" alt=""/></a>
					<a href="assets/images/17.png"><img src="assets/images/17.png" alt=""/></a>
					<a href="assets/images/18.png"><img src="assets/images/18.png" alt=""/></a>
					<a href="assets/images/19.png"><img src="assets/images/19.png" alt=""/></a>
					<a href="assets/images/20.png"><img src="assets/images/20.png" alt=""/></a>
					<a href="assets/images/21.png"><img src="assets/images/21.png" alt=""/></a>
					<a href="assets/images/22.png"><img src="assets/images/22.png" alt=""/></a>
					<a href="assets/images/23.png"><img src="assets/images/23.png" alt=""/></a>
					<a href="assets/images/24.png"><img src="assets/images/24.png" alt=""/></a>
					<a href="assets/images/25.png"><img src="assets/images/25.png" alt=""/></a>
					<a href="assets/images/26.png"><img src="assets/images/26.png" alt=""/></a>
					<a href="assets/images/27.png"><img src="assets/images/27.png" alt=""/></a>
					<a href="assets/images/28.png"><img src="assets/images/28.png" alt=""/></a>
					<a href="assets/images/29.png"><img src="assets/images/29.png" alt=""/></a>
					<a href="assets/images/30.png"><img src="assets/images/30.png" alt=""/></a>
					<a href="assets/images/31.png"><img src="assets/images/31.png" alt=""/></a>
					<a href="assets/images/32.png"><img src="assets/images/32.png" alt=""/></a>
					<a href="assets/images/33.png"><img src="assets/images/33.png" alt=""/></a>
					<a href="assets/images/34.png"><img src="assets/images/34.png" alt=""/></a>
					<a href="assets/images/35.png"><img src="assets/images/35.png" alt=""/></a>
					<a href="assets/images/36.png"><img src="assets/images/36.png" alt=""/></a>
				</div>
			</div>
		</div>
	</div>
	<div class="right-con">
		<div class="v-con">
			<div id="imgCon">
				<div id="photoViewCon">
					<img id="photoView" alt="" src="" />
				</div>
				<div class="app-list">
					<a href="assets/images/1.png"><img src="assets/images/1.png" alt=""/></a>
					<a href="assets/images/2.png"><img src="assets/images/2.png" alt=""/></a>
					<a href="assets/images/3.png"><img src="assets/images/3.png" alt=""/></a>
					<a href="assets/images/4.png"><img src="assets/images/4.png" alt=""/></a>
					<a href="assets/images/5.png"><img src="assets/images/5.png" alt=""/></a>
					<a href="assets/images/6.png"><img src="assets/images/6.png" alt=""/></a>
					<a href="assets/images/7.png"><img src="assets/images/7.png" alt=""/></a>
					<a href="assets/images/8.png"><img src="assets/images/8.png" alt=""/></a>
					<a href="assets/images/9.png"><img src="assets/images/9.png" alt=""/></a>
					<a href="assets/images/10.png"><img src="assets/images/10.png" alt=""/></a>
					<a href="assets/images/11.png"><img src="assets/images/11.png" alt=""/></a>
					<a href="assets/images/12.png"><img src="assets/images/12.png" alt=""/></a>
					<a href="assets/images/13.png"><img src="assets/images/13.png" alt=""/></a>
					<a href="assets/images/14.png"><img src="assets/images/14.png" alt=""/></a>
					<a href="assets/images/15.png"><img src="assets/images/15.png" alt=""/></a>
					<a href="assets/images/16.png"><img src="assets/images/16.png" alt=""/></a>
					<a href="assets/images/17.png"><img src="assets/images/17.png" alt=""/></a>
					<a href="assets/images/18.png"><img src="assets/images/18.png" alt=""/></a>
					<a href="assets/images/19.png"><img src="assets/images/19.png" alt=""/></a>
					<a href="assets/images/20.png"><img src="assets/images/20.png" alt=""/></a>
					<a href="assets/images/21.png"><img src="assets/images/21.png" alt=""/></a>
					<a href="assets/images/22.png"><img src="assets/images/22.png" alt=""/></a>
					<a href="assets/images/23.png"><img src="assets/images/23.png" alt=""/></a>
					<a href="assets/images/24.png"><img src="assets/images/24.png" alt=""/></a>
					<a href="assets/images/25.png"><img src="assets/images/25.png" alt=""/></a>
					<a href="assets/images/26.png"><img src="assets/images/26.png" alt=""/></a>
					<a href="assets/images/27.png"><img src="assets/images/27.png" alt=""/></a>
					<a href="assets/images/28.png"><img src="assets/images/28.png" alt=""/></a>
					<a href="assets/images/29.png"><img src="assets/images/29.png" alt=""/></a>
					<a href="assets/images/30.png"><img src="assets/images/30.png" alt=""/></a>
					<a href="assets/images/31.png"><img src="assets/images/31.png" alt=""/></a>
					<a href="assets/images/32.png"><img src="assets/images/32.png" alt=""/></a>
					<a href="assets/images/33.png"><img src="assets/images/33.png" alt=""/></a>
					<a href="assets/images/34.png"><img src="assets/images/34.png" alt=""/></a>
					<a href="assets/images/35.png"><img src="assets/images/35.png" alt=""/></a>
					<a href="assets/images/36.png"><img src="assets/images/36.png" alt=""/></a>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="bottom">
	&copy; ivanxu.com </div>
<script type="text/javascript">
var pItems = document.getElementById("pList").getElementsByTagName("a");
	for(var i = 0; i < pItems.length; i++){
		pItems[i].onclick = function(){
		document.getElementById("photoView").setAttribute("style","");
		document.getElementById("photoView").setAttribute("src",this.getAttribute("href"));
		return false;
	}
}
</script>

</body>

</html>
